<script setup>
import GradientLine from '../components/comprehensive/GradientLine.vue'
import GradientBar from '../components/comprehensive/GradientBar.vue'
import GradientTotalLine from '../components/comprehensive/GradientTotalLine.vue'
import GradientMultipleLine from '../components/comprehensive/GradientMultipleLine.vue'
import Pie from '../components/comprehensive/Pie.vue'
import MultiplePie from '../components/comprehensive/MultiplePie.vue'
import Radar from '../components/comprehensive/Radar.vue'
import HorizontalBar from '../components/comprehensive/HorizontalBar.vue'

import {ref} from "vue";
import {getIndexData} from '../api/index.js'

const data = ref()
const loadData = async () => {
    data.value = await getIndexData()
}
loadData()

setInterval(() => {
    loadData()
}, 60000)
</script>

<template>
    <div v-if="data" class="bg-[#02091c] h-screen text-white p-5 flex overflow-hidden">
        <div class="flex-1 mr-5 p-3 flex-col">
            <GradientLine class="h-1/3 box-border pb-4" :data="data.LastFiveYearsPopulationGrowthRate"/>
            <GradientBar class="h-1/3 box-border pb-4" :data="data.ResidentPopulation"/>
            <div class="h-1/3">
                <img class="anima" src="/assets/test.png" />
            </div>
        </div>
        <div class="flex-1 mr-5 p-3 flex-col">
            <GradientTotalLine class="h-1/3 box-border pb-4" :data="data.NumberOfBirthsAndDeaths"/>
            <HorizontalBar class="h-1/3 box-border pb-4" :data="data.SquadronCaseCount"/>
            <div class="h-1/3 spinner">
                <img src="/assets/test.png" />
            </div>
        </div>
        <div class="flex-1 mr-5 p-3 flex-col">
            <Radar class="h-1/3 box-border pb-4" :data="data.EventSource"/>
            <Pie class="h-1/3 box-border pb-4" :data="data.SownArea"/>
        </div>
        <div class="flex-1 p-3 flex-col">
            <GradientMultipleLine class="h-1/3 box-border pb-4" :data="data.NumberOfBirthsAndDeaths"/>
            <MultiplePie class="h-1/3 box-border pb-4" :data="data.ScientificAndTechnologicalInnovation"/>
        </div>
    </div>
</template>

<style scoped>
.anima {
    width: 100px;
    height: 100px;
    /* 动画名称 */
    animation-name: likes;
    /* 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 */
    animation-direction: alternate;
    /* 动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束； */
    animation-timing-function: linear;
    /* 动画延迟时间 */
    animation-delay: 0s;
    /* 动画播放次数，infinite：一直播放 */
    animation-iteration-count: infinite;
    /* 动画完成时间 */
    animation-duration: 1s;
}

@keyframes likes {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(0.8);
    }
    75% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.spinner {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* 将元素变为圆形 */
    animation: spin 5s infinite linear; /* 应用名称为"spin"的动画，持续时间为1秒，无限次数，线性过渡 */
}

@keyframes spin {
    0% { transform: rotate(0deg); } /* 初始状态，不旋转 */
    100% { transform: rotate(360deg); } /* 结束状态，完全旋转一周 */
}
</style>
